<template>
  <h2>通用组件</h2>
    <h3>分割线 n-divider</h3>
      <n-divider title-placement="left">title-placement=left</n-divider>
      <n-divider title-placement="center">title-placement=center</n-divider>
      <n-divider title-placement="right">title-placement=right</n-divider>
  <h2>数据录入组件</h2>
    <h3>开关 n-switch</h3>
      <h4>自定义开关</h4>
        <n-switch>
          <template #checked>
            <icon-mdi-white-balance-sunny />
          </template>
          <template #unchecked>
            <icon-mdi-moon-waning-crescent />
          </template>
        </n-switch>
  <h2>布局组件</h2>
    <h3>布局 n-layout</h3>
      <n-layout has-sider position="static">
        <n-layout-sider content-style="padding: 24px;">
          海淀桥
        </n-layout-sider>
        <n-layout>
          <n-layout-header>颐和园路</n-layout-header>
          <n-layout-content content-style="padding: 24px;">
            平山道
          </n-layout-content>
          <n-layout-footer>成府路</n-layout-footer>
        </n-layout>
      </n-layout>
</template>

<script setup lang="ts"></script>

<style scoped>
.n-layout-header,
.n-layout-footer {
  background: rgba(128, 128, 128, 0.2);
  padding: 24px;
}

.n-layout-sider {
  background: rgba(128, 128, 128, 0.3);
}

.n-layout-content {
  background: rgba(128, 128, 128, 0.4);
}
</style>
